<template>
  <view>
    <view class="tabs">
      <view class="tab-wrapper" v-for="(tab,i) in tabs" :key="i" :class="{current:i == currentTab}"
            @click="handleTabClick(i)">
        {{ tab }}
      </view>
    </view>

    <view class="list">
      <!--<view class="vip_info" @click="handleInfoClick">会员说明</view>-->
      <view :class="'item '+ `type-${item.cardType}`" v-for="(item,i) in list" :key="i">
        <image :src="item.cardType| BgFilter" class="bg"/>
        <view class="left">
          <image :src="item.cardType | LogoFilter" class="icon"/>
        </view>
        <view class="right">
          <view class="title">{{ item.cardName }}</view>

          <view class="desc" v-if="item.cardType == 2">
            <text>折扣：{{ item.discount / 10 }}折</text>
          </view>
          <view class="desc" >可用门店：{{item.comName}} </view>

          <view class="bottom">
            <view class="time" v-if="item.end == 0">永久有效</view>
            <view class="time" v-else>有效期至 {{ item.endStr }}</view>

            <view class="money" v-if="item.cardType == 1 || item.cardType  == 3">
              <text v-if="item.cardType == 1">￥</text>
              <text class="number">{{item.surplusNumber}}</text>
              <text v-if="item.cardType == 3">次</text>
            </view>
          </view>
        </view>
      </view>
      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>
    </view>

  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {ListLoadOver, ListEmpty, ListLoading},
  name: "vip-list",
  data() {
    return {
      currentTab: 0,
      tabs: ["储蓄卡", "特权卡", "次数卡"],
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
    }
  },
  onLoad() {
    this.getList();
  },
  methods: {
    handleTabClick(i) {
      this.currentTab = i;
      this.clear();
      this.getList();
    },
    handleInfoClick() {
      uni.navigateTo({url: `/pages/index/my/vip/info/index`})
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getMyVipCardList(this.currentTab + 1, ++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    }
  },
  computed: {
    type() {
      return this.currentTab;
    }
  },
  filters: {
    LogoFilter: function (value) {
      return `/static/img/qt/card_logo_${value}.png`;
    },
    BgFilter: function (value) {
      return `/static/img/qt/card_bg_${value}.png`;
    },
  },

  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>


.tabs {
  background-color: white;
  display: flex;

  .tab-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: r(18px 0);
    border-bottom: 2px solid transparent;


    &.current {
      border-color: $primary-color;
    }

  }
}


.list {
  padding-top: r(20px);
  padding-bottom: calc(env(safe-area-inset-bottom) + #{r(30px)});

  .vip_info {
    text-align: right;
    font-size: r(30px);
    color: #7B5533;
    padding-bottom: r(20px);
    margin-right: r(30px);
  }

  .item {
    box-shadow: r(3px 4px 32px 0) rgba(95, 95, 95, 0.26);
    border-radius: r(10px);
    margin: r(0 30px 30px 30px);
    padding: r(40px);
    display: flex;
    height: r(220px);
    position: relative;

    & > .bg {
      position: absolute;
      bottom: r(-10px);
      left: r(-10px);
      width: r(98px);
      height: r(98px);
    }

    &.type-1 {
      background: linear-gradient(-81deg, #2D8DFA 0%, #3EB4F9 100%);
    }

    &.type-2 {
      background: linear-gradient(-85deg, #15ACBB 0%, #01CBC5 100%);
    }

    &.type-3 {
      background: linear-gradient(-85deg, #ED7B31 0%, #F5A443 100%);
    }


    .icon {
      height: r(90px);
      width: r(90px);
      border-radius: 50%;
      background-color: white;
    }

    .right {
      flex: 1;
      margin-left: r(40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        color: #FFFFFF;
        font-size: r(36px);
      }

      .bottom{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .time {
          font-size: r(30px);
          color: rgba(#F2F2F2, 0.53);
        }

        .money{
          color: #ffffff;

          .number{
            font-size: r(50px);
          }
        }
      }

      .desc {
        font-size: r(25px);
        color: rgba(#222, 0.53);
      }
    }
  }
}
</style>